import React, { useEffect } from 'react'
import { Row, Col, Form, Input, Button, Typography, Select, Upload, Table, Tag, Popconfirm, Tooltip } from "antd"
import { DeleteOutlined, FormOutlined, FileSearchOutlined } from '@ant-design/icons';
import myinfo from '../../mobx/info'
import { observer } from 'mobx-react'
import moment from '_moment@2.29.1@moment'
import { peportsTypeList } from '../../utils/commom'
import { ajax } from '../../api';

const { Title } = Typography
const { Column, ColumnGroup } = Table;
function ReportList({history}:any) {
    const { weixiuList, getWeixiuListAsync, getWeixiuList } = myinfo
    useEffect(() => {
        getWeixiuListAsync({})
    }, [])
    const confirm = async (item: any, index: any) => {
        let { code, result }: any = await ajax.deleteweixiu({ _id: item._id })
        if (code == 200) {
            weixiuList.splice(index, 1);
            getWeixiuList([...weixiuList])
        }

    }

    const gotoEditWeixiu=(item:any)=>{
        history.push('/main/reports/Reportedit/'+item._id)
    }

    const gotoChaKanWeixiu=(item:any)=>{
        history.push('/main/reports/ReportDetail?aid='+item._id)
    }
    return (
        <div>
            <Title level={4}>报修列表</Title>
         

            <Row>
                <Col span={20}>
                    <Table
                        dataSource={weixiuList}
                        sticky
                        bordered
                        id="table"
                        pagination={{ pageSize: 6 }}
                        rowKey={(item: any) => item._id}
                    >
                        <Column
                            title="#"
                            align='center'
                            render={(text, item, index) => (
                                <b>{index + 1}</b>
                            )}
                        />


                        <Column title="维修项目" align='center' dataIndex="title" key="title"
                            render={(text) => (
                                <b>{text}</b>
                            )}
                        />

                        <Column title="发布人员" align='center' dataIndex="userInfo" key="userInfo"
                            render={(text) => (
                                <b>{text?.username}</b>
                            )}
                        />


                        <Column
                            title="上报时间"
                            dataIndex="time"
                            key="time"
                            align='center'
                            render={(text, item, index) => (
                                <p>{moment(text).format('YYYY-MM-DD HH:MM')}</p>
                            )}
                        />

                        <Column
                            title="维修类型"
                            dataIndex="type"
                            key="type"
                            align='center'
                            render={(text, item, index) => (
                                <Tag color={peportsTypeList.find((item: any) => item.value == text)?.color}>
                                    {peportsTypeList.find((item: any) => item.value == text)?.text}
                                </Tag>
                            )}
                        />

                        <Column
                            title="操作"
                            align='center'
                            render={(text, item: any, index) => (
                                <div>
                                    <Popconfirm
                                        title="你确定要删除吗?"
                                        onConfirm={() => confirm(item, index)}
                                        okText="确定"
                                        cancelText="不了吧"

                                    >
                                        <Button danger shape="circle" icon={<DeleteOutlined />} size="small" />
                                    </Popconfirm>
                                  

                                    <Tooltip placement='top' title={'查看'}>
                                        <Button onClick={()=>gotoChaKanWeixiu(item)} type="primary" shape="circle" icon={<FileSearchOutlined />} size="small" />
                                    </Tooltip>

                                    <Tooltip placement='top' title={'编辑'}>
                                        <Button onClick={()=>gotoEditWeixiu(item)} style={{ margin: '0 5px' }} type="primary" shape="circle" icon={<FormOutlined />} size="small" />
                                    </Tooltip>
                                </div>
                            )}
                        />
                    </Table>
                </Col>

            </Row>
        </div>
    )
}
export default observer(ReportList)
